<template>
  <view class="con">
    <!-- 列表 -->
    <view class="list">
      <view class="listli">
        <view class="listlit flex flex_between">
          <view class="listlitz">
            <image class="listlitz_img" :src="butieInfo.pic"></image>
            <!-- <view class="listlitz_1">express</view> -->
            <view class="listlitz_2">{{dian}}</view>
          </view>
          <view class="listlity shangXiaCenter">
            <view>
              <view class="listlity1 flex flex_between">
                <view class="listlity1z flex flex_between">
                  <view class="listlity1z1 flex">
                    <image class="listlity1z1_img" :src="butieInfo.pingtai_ico">
                    </image>
                    <view class="listlity1z1_v">{{butieInfo.title}}</view>
                  </view>
                  <view class="listlity1z2 flex">
                    <image class="listlity1z2_img" src="/static/index/img16.png" mode="heightFix">
                    </image>
                    <view class="listlity1z2_v">{{butieInfo.ping_hongbao}}</view>
                  </view>
                </view>
              </view>
              <view class="zhen_add" v-if="butieInfo.ping_if">{{butieInfo.ping_if}}</view>
            </view>
            <view>
              <view class="listlity3">剩余<text>{{butieInfo.cur_surplus}}</text>件</view>
              <view class="listlity4">
                <view class="listlity4cc"><text
                    :style="{width:(Number(butieInfo.stock)-Number(butieInfo.cur_surplus))/Number(butieInfo.stock)*100+'%'}"></text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="listlib flex flex_between">
          <view class="listlib_1 flex">
            <text class="listlib_1_t1">实付{{butieInfo.money}}</text>
            <text class="listlib_1_t2">补贴{{butieInfo.money_butie}}</text>
          </view>
          <view class="listlib_1 flex" v-if="butieInfo.money_kefu!=='0' && butieInfo.money_kefu!=='0.00'">
            <text class="listlib_1_t1">客返{{butieInfo.money_kefu}}</text>
            <text class="listlib_1_t3">{{butieInfo.money_pwd}}</text>
          </view>
        </view>
      </view>
      <view class="listli" style="height: auto;">
        <view class="zhn">
          <view class="tia flex flex_between">
            <view class="tiaz flex">
              <view class="tiazz">产品链接</view>
          <!--    <image class="tiazy" @click="showTan_wen" src="/static/index/img12.png" mode="widthFix">
              </image> -->
            </view>
            <view class="tiay" @click="showTan_video">产品规格提示</view>
          </view>
          <view class="tiazlist">
            <view class="tiazlistli">{{butieInfo.url}}</view>
            <!-- <view class="tiazlistli">长按复制此条消息，打开抖音搜索，查看商品详情！</view> -->
          </view>
          <view class="zhnc flex flex_between">
            <view style="margin: 20rpx 0;">
              <view class="zhnc_y flex">
                <image class="zhnc_y_img" src="/static/index/img26.png" mode="heightFix"></image>
                <view class="zhnc_yc" @click="copyText">复制链接</view>
              </view>
            </view>

          </view>
        </view>
      </view>
      <!-- 这是新增的订单 -->
      <view v-if="isShowAddCon">
        <view class="listli" style="height: auto;">
          <view class="zhn">
			  <!-- if_ordernum 订单号上传(0不开启、1开启) -->
            <view class="tiazlist1" v-if="if_ordernum!=='0'">
              <input type="text" placeholder="粘贴已付款订单编号(仅数字)" v-model="ordernum" class="tiazlistli"
                @input="onInputOrdernum" />
            </view>
            <view class="zhnc flex flex_between">
              <view class="zhnc_y flex">
                <view class="qiji_l_b flex">
                  <view class="qiji_l_b_li flex" @click="chooseImageBtn('add','upLoadpic')">
                    <view v-if="addUpLoadpic">
                      <image class="qiji_l_b_img2" mode="widthFix" :src="addUpLoadpic"></image>
                    </view>
                    <view v-else>
                      <image class="qiji_l_b_img" src="/static/mine/img16.png" mode="widthFix">
                      </image>
                      <view class="qiji_l_b_con">客服聊天</view>
                    </view>
                  </view>
                  <view class="qiji_l_b_li flex" @click="chooseImageBtn('add','upLoadpic2')">
                    <view v-if="addUpLoadpic2">
                      <image class="qiji_l_b_img2" mode="widthFix" :src="addUpLoadpic2"></image>
                    </view>
                    <view v-else>
                      <image class="qiji_l_b_img" src="/static/mine/img16.png" mode="widthFix">
                      </image>
                      <view class="qiji_l_b_con">支付订单</view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="zhnc_z flex">
                <view class="zhnc_z1">有效时间</view>
                <view class="zhnc_z2">{{CountdownTime}}</view>
              </view>
            </view>
          </view>
        </view>
        <!-- 刚进入页面的“确认提交”：先判断按钮状态是否为黄色（单号，和图片都上传以后），然后通过“继续补贴任务”判断能否进行提交，然后弹出确认框进行-提交 -->
        <view class="tijiaBtn" :class="addBtnStatue?'huanse':''" @click="addBtnHandler">确认提交</view>
      </view>
      <!-- 点击“再来一单”以后的“确认提交”，只需要判断按钮状态是否为黄色（单号，和图片都上传），如果都传了以后，弹出确认框进行-提交 -->
      <view class="tijiaBtn huanse" v-if="!isShowAddCon&&(butieInfo.surplus_time>0||butieInfo.surplus_time==='stop')"
        @click="moreOder">再来一单</view>
      <!-- 这个是后台返回的订单列表数据 butieInfo.task_item-->
      <view class="listli" style="height: auto;" v-if="item2.pic!==''"
        v-for="(item2,index2) in butieInfo.task_item" :key="index2">
        <view class="qiji_l">
          <view class="shizhe">
            <!-- 0、1审核中、2已校验、3校验无效、10已补贴（不会有没提交的订单） -->
            <view class="qiji_l_t">{{getMsgByState(item2.state1)}}</view>
            <view class="qiji_l_c flex flex_between">
              <!-- 订单为“检验无效”时，才允许编辑，其他状态都是只可读 -->
              <input class="qiji_l_c_ipt" type="text" :disabled="item2.state1!=='3'" placeholder="粘贴已付款订单编号(仅数字)"
                v-model="item2.ordernum" v-if="if_ordernum!=='0'" />
              <view class="qiji_l_c_btn huise" @click="modifyOrder(item2)" v-if="if_ordernum!=='0'">修改</view>
            </view>
            <view class="qiji_l_t">待提交截图</view>
            <!-- 待提交的订单 -->
            <view class="qiji_l_b flex flex_between">
              <!-- 客服聊天 -->
              <view class="qiji_l_b_li flex" @click="chooseImageBtn('edit','upLoadpic',item2,index2)">
                <view v-if="item2.pic.includes('http')">
                  <image class="qiji_l_b_img2" mode="widthFix" :src="item2.pic"></image>
                  <!-- 蒙版 -->
                  <view v-if="item2.isShowMengBan_1">
                    <view class="mengban">{{getMsgByState(item2.state1)}}</view>
                  </view>
                </view>
                <view v-else>
                  <image class="qiji_l_b_img" src="/static/mine/img16.png" mode="widthFix"></image>
                  <view class="qiji_l_b_con">客服聊天</view>
                </view>
              </view>
              <!-- 支付订单 -->
              <view class="qiji_l_b_li flex" @click="chooseImageBtn('edit','upLoadpic2',item2,index2)">
                <view v-if="item2.pic2.includes('http')">
                  <image class="qiji_l_b_img2" mode="widthFix" :src="item2.pic2"></image>
                  <!-- 蒙版 -->
                  <view v-if="item2.isShowMengBan_2">
                    <view class="mengban">{{getMsgByState(item2.state1)}}</view>
                  </view>
                </view>
                <view v-else>
                  <image class="qiji_l_b_img" src="/static/mine/img16.png" mode="widthFix"></image>
                  <view class="qiji_l_b_con">支付订单</view>
                </view>
              </view>
              <!-- 快递签收 -->
              <view class="qiji_l_b_li flex" @click="chooseImageBtn('edit','upLoadpic3',item2,index2)">
                <view v-if="item2.pic3.includes('http')">
                  <image class="qiji_l_b_img2" mode="widthFix" :src="item2.pic3"></image>
                  <view v-if="item2.isShowMengBan_3">
                    <!-- 蒙版 -->
                    <view class="mengban">{{getMsgByState(item2.state2)}}</view>
                  </view>
                </view>
                <view v-else>
                  <image class="qiji_l_b_img" src="/static/mine/img16.png" mode="widthFix"></image>
                  <view class="qiji_l_b_con">快递签收</view>
                </view>
              </view>
              <!-- 产品好评 -->
              <view class="qiji_l_b_li flex" @click="chooseImageBtn('edit','upLoadpic4',item2,index2)">
                <view v-if="item2.pic4.includes('http')">
                  <image class="qiji_l_b_img2" mode="widthFix" :src="item2.pic4"></image>
                  <view v-if="item2.isShowMengBan_4">
                    <!-- 蒙版 -->
                    <view class="mengban">{{getMsgByState(item2.state2)}}</view>
                  </view>
                </view>
                <view v-else>
                  <image class="qiji_l_b_img" src="/static/mine/img16.png" mode="widthFix"></image>
                  <view class="qiji_l_b_con">产品好评</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="zhezhao" v-if="isShow || isShow_wen || isShow_timeOut || isShow_video" @click="hideTan"></view>
    <view class="tan" v-if="isShow">
      <view class="tan_title">确认提交</view>
      <view class="tan_t flex">
        <view class="tan_newli_wrap">
          <view class="tan_newli flex">
            <view class="tan_newli_v">感谢亲的参与补贴专区的活动，请确认提交的信息是否无误，已经提交不可修改</view>
          </view>
        </view>
      </view>
      <view class="tan_b flex flex_between">
        <view class="tan_b_d1" @click="hideTan">再看看</view>
        <view class="tan_b_d2" @click="goAddBtn">我确定</view>
      </view>
    </view>
    <!-- 通用问号弹出 -->
    <view class="tan tan_wen" v-if="isShow_wen">
      <view class="tan_title">关于低价专区</view>
      <view class="tan_t flex">
        <view class="tan_newli_wrap">
          <view class="tan_newli flex" v-for="(item,index) in butieTip.tips">
            <image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
            <view class="tan_newli_v">{{item.content}}</view>
          </view>
        </view>
      </view>
      <view class="tan_b flex flex_between">
        <view class="tan_b_d2" @click="hideTan">我已知晓</view>
      </view>
    </view>
    <!-- 超时弹出 -->
    <view class="tan tan_wen" v-if="isShow_timeOut">
      <view class="tan_title">非常抱歉</view>
      <view class="tan_t flex">
        <view class="tan_newli_wrap">
          <view class="tan_newli flex">
            <image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
            <view class="tan_newli_v">你的操作时间，超过了有效时间，本次补贴资格已失效，请重新选择补贴产品</view>
          </view>
        </view>
      </view>
      <view class="tan_b flex flex_between">
        <view class="tan_b_d2" @click="hideTan_timeOut">我已知晓</view>
      </view>
    </view>
    <!-- 实操课程 -->
    <view class="tan tan_video" v-if="isShow_video">
      <image mode="widthFix" :src="butieInfo.pic2"></image>
    </view>
  </view>
</template>

<script>
  import {
    getProductButieOrder, //补贴任务内容详细
    otherPingpic, //上传图片
    productButieOrderSet, //提交补贴任务
    productButieGoOn, //继续补贴任务
    getOtherButieTips //补贴专区说明
  } from '@/request/api.js'
  export default {
    data() {
      return {
        // oycWz5SBi1rMTuqdQhLy4iSvgHjU
        // oycWz5flB9yZkf6Uw65uq-xzA0mA
        // oycWz5QsRe9IbIHkgnCLwO4oWYIQ
        openid: uni.getStorageSync('openid'), //获取缓存的openid
        // openid:'oycWz5flB9yZkf6Uw65uq-xzA0mA',
        isShow: false,
        isShow_wen: false,
        isShow_video: false,
        isShow_timeOut: false,
        countdownTime: 10 * 60 * 1000, //倒计时初始时间
        CountdownTime: '', //倒计时时间显示
        timer: null, //定时器
        oid: '', //补贴任务ID
        butieInfo: {}, //补贴任务内容详细
        butieTip: {}, //补贴专区说明
        ordernum: '', //新增-订单号
        addUpLoadpic: '', //新增-客服聊天图片
        addUpLoadpic2: '', //新增-付款订单图片
        isShowAddCon: true, //新增成功以后,需要先隐藏新增模块,出现"再来一单"按钮
        addBtnStatue: false, //新增"确认提交"的按钮颜色;是否可以点击
        addOrderUseId: '', //新增订单时候的Id:继续补贴任务接口返回的id（点击再来一单）
        isHasOneKong: false, //判断返回的列表有一个为空的话，就需要先
        dian:'',//店铺名字
		if_ordernum:'0' //订单号上传(0不开启、1开启)
      };
    },
    onLoad(options) {
      console.log('前一个页面传来的信息')
      console.log(options)
      this.oid = options.id
      this.dian = options.dian
      this.getProductButieOrderFun(); //补贴任务内容详细
      this.getProductButieOrderFun2(); //补贴任务内容详细---用于进入页面的时候，进行“新增区域”和“再来一单”判断
      this.getOtherButieTipsFun() // 获取补贴专区说明
    },
    onShow(){
      // this.getProductButieOrderFun(); //补贴任务内容详细
      // this.getProductButieOrderFun2(); //补贴任务内容详细---用于进入页面的时候，进行“新增区域”和“再来一单”判断
      // this.getOtherButieTipsFun() // 获取补贴专区说明
    },
    computed: {

    },
    methods: {
      // 获取补贴专区说明
      getOtherButieTipsFun() {
        getOtherButieTips().then(res => {
          console.log('获取补贴专区说明')
          console.log(res)
          if (res.error_code === 0) {
            this.butieTip = res.data
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },
      getProductButieOrderFun2() {
        let param = {
          openid: this.openid,
          oid: this.oid
        }
        let that = this
        getProductButieOrder(param).then(res => {
          // 如果没有已经提交的订单出现"新增那块",否则"隐藏"
          if (res.data.task_item.length === 1 && res.data.task_item[0].pic === '') {
            this.isShowAddCon = true
            this.addOrderUseId = res.data.task_item[0].id
          } else {
            this.isShowAddCon = false
          }
        })
      },

      // 获取补贴任务内容详细
      getProductButieOrderFun() {
        let param = {
          openid: this.openid,
          oid: this.oid
        }
        let that = this
        getProductButieOrder(param).then(res => {
          console.log('补贴任务内容详细')
          console.log(res)
          if (res.error_code === 0) {
            // this.butieInfo = res.data
            clearInterval(this.timer);
            that.countdownTime = res.data.surplus_time * 1000
            console.log('剩余时间(秒)，大于0时有效')
            console.log(that.countdownTime)
            if (that.countdownTime > 0) {
              that.startCountdown(that.countdownTime);
            }
            let list = res.data
            // 加一个字段---判断图片上是否显示状态蒙版
            if (list.task_item.length > 0) {
              list.task_item.forEach(item => {
                item.isShowMengBan_1 = true //第一张图的蒙版
                item.isShowMengBan_2 = true //第二张图的蒙版
                item.isShowMengBan_3 = true //第三张图的蒙版
                item.isShowMengBan_4 = true //第四张图的蒙版
              })
            }
			this.if_ordernum = list.if_ordernum
            that.butieInfo = list
            that.$forceUpdate()
			console.log('订单详情')
            console.log(that.butieInfo)
			
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },

      // 根据状态返回文字
      getMsgByState(state) {
        let msg = ''
        if (state === '0' || state === '1') {
          msg = '审核中'
        } else if (state === '2') {
          msg = '已校验'
        } else if (state === '3') {
          msg = '校验无效'
        } else if (state === '10') {
          msg = '已补贴'
        }
        return msg
      },

      // 获取 新增"确认提交"的按钮颜色:单号,图片都上传
      getAddBtnStatue() {
		  //订单号上传(0不开启、1开启)
		if(this.if_ordernum==='0'){
			this.addBtnStatue = (this.addUpLoadpic !== '' && this.addUpLoadpic2 !== '')
		}else{
			this.addBtnStatue = (this.ordernum !== '' && this.addUpLoadpic !== '' && this.addUpLoadpic2 !== '')
		}
        
      },

      // 监听新增-输入的订单编号
      onInputOrdernum() {
        console.log(this.ordernum)
        this.getAddBtnStatue()
      },

      // 新增-确认提交-出现弹窗
      addBtnHandler() {
        if (this.addBtnStatue) {
          this.isShow = true
        } else {
          console.log('需要先填写单号，传两张图片')
        }

      },

      // 新增-确认提交弹窗-提交
      goAddBtn() {
		  console.log('新增-确认弹框')
		  console.log(this.openid)
		  console.log(this.addOrderUseId)
		  console.log(this.ordernum)
			console.log(this.addUpLoadpic)
			console.log(this.addUpLoadpic2)
        let param = {
          openid: this.openid,
          id: this.addOrderUseId,
          ordernum: this.ordernum,
          pic: this.addUpLoadpic,
          pic2: this.addUpLoadpic2
        }
        this.productButieOrderSetFun(param)
      },


      // 提交补贴任务
      productButieOrderSetFun(param) {
        productButieOrderSet(param).then(res => {
          console.log('提交补贴任务')
          console.log(res)
          if (res.error_code === 0) {
            // 新增成功以后,需要先隐藏新增模块,出现"再来一单"按钮
            console.log('新增成功以后')
            this.ordernum = this.addUpLoadpic = this.addUpLoadpic2 = ''
            this.getProductButieOrderFun()
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
          this.isShowAddCon = this.isShow = false
        })
      },

      // 点击再来一单
      moreOder() {
        this.isHasOneKong = false //重置数据
        console.log('清除数据')
        // clearInterval(this.timer);
        this.countdownTime = ''
        this.$forceUpdate();
        let butieInfoItem = this.butieInfo.task_item
        butieInfoItem.forEach(item => {
          if (item.pic === '') {
            this.isHasOneKong = true
            this.addOrderUseId = item.id
          }
        })
        if (this.isHasOneKong) {
          console.log('有一个空数据')
          this.ordernum = this.addUpLoadpic = this.addUpLoadpic2 = ''
          this.isShowAddCon = true
        } else {
          console.log('没有空数据')
          console.log('点击-再来一单')
          this.CountdownTime = ''
          let param_1 = {
            openid: this.openid,
            gid: this.butieInfo.gid
          }
          productButieGoOn(param_1).then(res => {
            console.log('继续补贴任务')
            console.log(res)
            if (res.error_code === 0) {
              this.addOrderUseId = res.data.id
              // 拿到id以后去新增
              this.isShowAddCon = true
              this.addBtnStatue = false
            } else {
              uni.showToast({
                icon: 'none',
                title: res.msg
              })
            }
            this.getProductButieOrderFun()
          })
        }

      },


      // 修改订单
      modifyOrder(item2) {
        console.log('点击修改')
        console.log(item2)
        // 审核中，已检验，已补贴。这三种情况都提示--无法修改,只有"检验无效"才能修改订单
        let title = this.getMsgByState(item2.state1)
        if (title !== '校验无效') {
          uni.showToast({
            icon: 'none',
            title: '该订单' + title + ',无法修改'
          })
        } else {
          console.log('进行修改--订单号')
          let param = {
            openid: this.openid,
            id: item2.id,
            ordernum: item2.ordernum,
            pic: item2.pic,
            pic2: item2.pic2
          }
          this.productButieOrderSetFun(param)
        }

      },


      // 上传图片
      chooseImageBtn(HandleType, type, item2, index) {
        let that = this
        if (HandleType === 'edit') {
          // 前面两个图片修改-需要判断是"检验无效"才能修改
          let title = that.getMsgByState(item2.state1)
          // 后面两个图片修改-也需要判断是"检验无效"才能修改
          let title2 = that.getMsgByState(item2.state2)
          if (type === 'upLoadpic' || type === 'upLoadpic2') {
            if (title !== '校验无效') {
              uni.showToast({
                icon: 'none',
                title: '该图片' + title + ',无法修改'
              })
              return
            }
          } else {
            if (title === '审核中' || title === '校验无效') {
              uni.showToast({
                icon: 'none',
                title: '该订单' + title + ',无法新增'
              })
              return
            }
            if(title2 !== '校验无效'){
              uni.showToast({
                icon: 'none',
                title: '该图片' + title2 + ',无法修改'
              })
              return
            }
          }
        }

        // 判断是哪个地方上传的图片
        uni.chooseImage({
          count: 1,
          sizeType: "original",
          sourceType: ['album', 'camera'], //从相册选择
          success(res) {
            console.log('上传图片')
            console.log(res)
            uni.uploadFile({
              url: 'https://moshangweilai.herobing.com/other/pingpic', //上传接口地址
              name: 'pic', //后端接收的文件参数名
              filePath: res.tempFilePaths[0], //要上传的文件路径
              formData: {},
              header: {
                "Content-Type": "multipart/form-data"
              },
              success: (uploadFileRes) => {
                console.log('后端返回的图片')
                let res = JSON.parse(uploadFileRes.data)
                console.log(res);
                if (res.error_code === 0) {
                  let pic = res.data.pic
                  if (HandleType === 'add') {
                    console.log('新增--传图片')
                    if (type === 'upLoadpic') {
                      // that.upLoadpic = pic
                      that.addUpLoadpic = pic
                    } else if (type === 'upLoadpic2') {
                      that.addUpLoadpic2 = pic
                    }
                    that.getAddBtnStatue()
                  } else {
                    console.log('编辑--传图片')

                    if (type === 'upLoadpic') {
                      // that.upLoadpic = pic

                      // 上传后,立即请求接口进行修改：审核中，已检验，已补贴。这三种情况都提示--无法修改,只有"检验无效"才能修改

                      that.butieInfo.task_item[index].pic = pic
                      that.butieInfo.task_item[index].isShowMengBan_1 = false
                      console.log('进行修改--客服聊天图')
                      let param = {
                        openid: that.openid,
                        id: item2.id,
                        ordernum: item2.ordernum,
                        pic: item2.pic,
                        pic2: item2.pic2
                      }
                      that.productButieOrderSetFun(param)
                      that.getProductButieOrderFun()
                    } else if (type === 'upLoadpic2') {
                      that.butieInfo.task_item[index].pic2 = pic
                      that.butieInfo.task_item[index].isShowMengBan_2 = false
                      console.log('进行修改--支付订单图')
                      let param = {
                        openid: that.openid,
                        id: item2.id,
                        ordernum: item2.ordernum,
                        pic: item2.pic,
                        pic2: item2.pic2
                      }
                      that.productButieOrderSetFun(param)
                      that.getProductButieOrderFun()
                    } else if (type === 'upLoadpic3') {
                      that.butieInfo.task_item[index].pic3 = pic
                      that.butieInfo.task_item[index].isShowMengBan_3 = false
                      let param = {
                        openid: that.openid,
                        id: item2.id,
                        ordernum: item2.ordernum,
                        pic3: item2.pic3
                      }
                      that.productButieOrderSetFun(param)
                      that.getProductButieOrderFun()
                    } else if (type === 'upLoadpic4') {
                      that.butieInfo.task_item[index].pic4 = pic
                      that.butieInfo.task_item[index].isShowMengBan_4 = false
                      let param = {
                        openid: that.openid,
                        id: item2.id,
                        ordernum: item2.ordernum,
                        pic4: item2.pic4
                      }
                      that.productButieOrderSetFun(param)
                      that.getProductButieOrderFun()
                    }
                  }
                  that.$forceUpdate()
                } else {
                  uni.showToast({
                    icon: 'none',
                    title: res.msg
                  })
                }

              },
            })
          }
        })
      },
      showTan_video() {
        this.isShow_video = true
      },
      showTan_wen() {
        this.isShow_wen = true
      },
      hideTan() {
        this.isShow_wen = this.isShow = this.isShow_video = false
      },
      // 超时提醒弹窗-点击后"我已知晓"
      hideTan_timeOut() {
        uni.navigateBack({
          delta: 1
        });
      },
      // 个位数补0操作
      getTwoNum(num) {
        if (num < 10) {
          return num = '0' + num
        } else {
          return num
        }
      },
      // 10分钟倒计时
      startCountdown(duration) {
        const now = new Date();
        const countdownEnd = now.getTime() + duration;

        this.timer = setInterval(() => {
          const timeLeft = countdownEnd - new Date().getTime();

          if (timeLeft <= 0) {
            clearInterval(this.timer);
            console.log('倒计时结束！');
            // 这里可以添加倒计时结束时需要执行的代码
            this.isEndTime = this.isShow_timeOut = true

          } else {

            const minutes = this.getTwoNum(Math.floor(timeLeft / 60000));
            const seconds = this.getTwoNum(((timeLeft % 60000) / 1000).toFixed(0));
            // console.log(`倒计时: ${minutes}:${seconds}`);
            // 这里可以更新页面上的显示时间
            this.CountdownTime = minutes + ':' + seconds
            // console.log(this.CountdownTime)
          }
        }, 1000);
      },
      // 点击 复制链接
      // 点击"复制"
      copyText() {
        uni.setClipboardData({
          data: this.butieInfo.url,
          success: function() {
            uni.showToast({
              title: '复制成功',
              icon: 'success',
              duration: 2000
            });
          }
        });
      },
    }
  }
</script>

<style scoped lang="scss">
  .con {
    .top {
      width: 100%;
      height: auto;
      border-radius: 20rpx;
      background-color: rgba(255, 255, 255, 1);
      position: relative;
      z-index: 1;
      padding-top: 54rpx;

      .top1 {
        width: 100%;
        height: auto;
        align-items: normal;

        .top1v1 {
          width: 400rpx;
          height: 140rpx;
          border-radius: 0px 100rpx 100rpx 0px;
          background-color: rgba(249, 191, 65, 1);
          padding: 16rpx 30rpx;
          box-sizing: border-box;

          .top1v1_1 {
            .top1v1_1v1 {
              line-height: 58rpx;
              color: rgba(16, 16, 16, 1);
              font-size: 48rpx;
              font-family: 'AvantGardeFont';
              font-weight: bold;
              margin-top: 5rpx;

              text {
                font-weight: 100;
              }
            }

            .top1v1_1img {
              width: 24rpx;
              position: relative;
              top: -15rpx;
            }
          }

          .top1v1_2 {
            color: rgba(0, 0, 0, 1);
            font-size: 28rpx;
            margin-top: 6rpx;
          }
        }

        .top1v2 {
          width: 220rpx;
          height: 68rpx;
          border-radius: 100rpx;
          background-color: rgba(249, 191, 65, 1);
          justify-content: center;
          margin-right: 30rpx;

          .top1v2_img {
            width: 48rpx;
            height: auto;
          }

          .top1v2_v {
            color: rgba(0, 0, 0, 1);
            font-size: 28rpx;
          }
        }

      }

      .top2 {
        width: 650rpx;
        height: auto;
        margin: 30rpx;
        box-sizing: border-box;
        border-top: 2rpx solid #d3d3d3;
        padding: 30rpx 0;
        margin-top: 50rpx;
        margin-bottom: 20rpx;

        .top2li {
          width: 25%;
          text-align: center;

          .top2li_1 {
            width: 16rpx;
            height: 16rpx;
            border-radius: 100%;
            margin: 0 auto;
            position: relative;
            top: -38rpx;
            background-color: rgba(137, 137, 137, 1);
          }

          .top2li_2 {
            color: rgba(0, 0, 0, 1);
            font-size: 28rpx;
            margin-top: -20rpx;
          }
        }
      }
    }

    .guolv {
      width: 100%;
      height: 90rpx;
      border-radius: 20rpx;
      background-color: rgba(255, 255, 255, 1);
      padding: 24rpx 30rpx;
      box-sizing: border-box;
      margin-bottom: 20rpx;
      padding-right: 0;
      z-index: 1;
      position: relative;

      .guolv_v1 {
        color: rgba(0, 0, 0, 1);
        font-size: 28rpx;
      }
    }

    .list {
      width: 100%;
      height: auto;

      .listli {
        width: 100%;
        height: 334rpx;
        border-radius: 20rpx;
        background-color: rgba(255, 255, 255, 1);
        overflow: hidden;
        padding: 30rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;

        .listlit {
          width: 100%;
          height: 200rpx;
          align-items: normal;
          overflow: hidden;

          .listlitz {
            width: 200rpx;
            height: 200rpx;
            border-radius: 20rpx;
            // overflow: hidden;
            position: relative;
            margin-right: 34rpx;

            .listlitz_img {
              width: 200rpx;
              height: 200rpx;
              border-radius: 20rpx;
            }

            .listlity1z1_v {
              width: 300rpx;
            }

            .listlitz_1 {
              position: absolute;
              height: 32rpx;
              border-radius: 0px 40rpx 40rpx 0px;
              background-color: rgba(249, 65, 65, 1);
              display: inline-block;
              color: rgba(255, 255, 255, 1);
              font-size: 24rpx;
              left: 0;
              top: 20rpx;
              line-height: 27rpx;
              padding: 0 10rpx;
            }

            .listlitz_2 {
              width: 100%;
              height: 44rpx;
              line-height: 44rpx;
              border-radius: 0px 0px 10px 10px;
              background-color: rgba(249, 191, 65, 1);
              color: rgba(16, 16, 16, 1);
              font-size: 24rpx;
              overflow: hidden;
              position: absolute;
              bottom: 0;
              text-align: center;
            }
          }

          .listlity {
            width: 500rpx;
            height: 200rpx;

            .listlity1 {
              width: 100%;

              box-sizing: border-box;

              .listlity1z {
                width: 100%;

                .listlity1z1 {
                  height: 40rpx;

                  .listlity1z1_img {
                    width: 30rpx;
                    height: 30rpx;
                    flex-shrink: 0;
                    border-radius: 100%;
                    margin-right: 10rpx;
                  }

                  .listlity1z1_v {
                    width: 210rpx;
                    height: 40rpx;
                    line-height: 42rpx;
                    color: rgba(16, 16, 16, 1);
                    font-size: 28rpx;
                    overflow: hidden;
                  }
                }

                .listlity1z2 {
                  height: 30rpx;
                  line-height: 40rpx;
                  border-radius: 40rpx;
                  background-color: rgba(216, 30, 6, 1);
                  color: rgba(16, 16, 16, 1);
                  font-size: 28rpx;
                  padding: 0 10rpx;
                  padding-right: 20rpx;
                  padding-left: 2rpx;
                  overflow: hidden;

                  .listlity1z2_img {
                    width: auto;
                    height: 30rpx;
                  }

                  .listlity1z2_v {
                    color: rgba(255, 255, 255, 1);
                    font-size: 28rpx;
                    margin-left: 8rpx;
                    font-family: 'AvantGardeFont';
                  }
                }
              }

            }

            .listlity2 {
              width: 100%;
              padding-right: 30rpx;
              box-sizing: border-box;
              color: rgba(0, 0, 0, 1);
              font-size: 24rpx;
              font-family: 'AvantGardeFont';
              margin-top: 14rpx;

              text {
                font-size: 46rpx;
              }
            }

            .listlity3 {
              width: 100%;
              box-sizing: border-box;
              color: rgba(137, 137, 137, 1);
              font-size: 24rpx;
              width: 100%;
              text-align: right;

              text {
                font-family: 'AvantGardeFont';
              }
            }

            .listlity4 {
              width: 100%;
              box-sizing: border-box;

              .listlity4cc {
                width: 100%;
                height: 16rpx;
                border-radius: 20rpx;
                margin-top: 6rpx;
                background-color: rgba(232, 230, 230, 1);
                position: relative;
                overflow: hidden;
              }

              text {
                width: 0%;
                height: 16rpx;
                border-radius: 20rpx;
                display: inline-block;
                background-color: rgba(249, 191, 65, 1);
                position: absolute;
                top: 0;
                left: 0;
                ;
              }
            }
          }
        }

        .listlib {
          width: 100%;
          height: auto;
          padding: 30rpx 0;
          padding-bottom: 0;
          box-sizing: border-box;

          .listlib_1 {
            width: 310rpx;
            height: 44rpx;
            background: #f00;
            line-height: 44rpx;
            border-radius: 40rpx;
            overflow: hidden;

            .listlib_1_t1 {
              background-color: rgba(249, 191, 65, 1);
              width: 50%;
              color: rgba(0, 0, 0, 1);
              font-size: 24rpx;
              height: 44rpx;
              display: block;
              text-align: center;
            }

            .listlib_1_t2 {
              background-color: rgba(0, 0, 0, 1);
              width: 50%;
              color: #fff;
              font-size: 24rpx;
              height: 44rpx;
              display: block;
              text-align: center;
            }

            .listlib_1_t3 {
              background-color: rgba(232, 230, 230, 1);
              width: 50%;
              color: rgba(0, 0, 0, 1);
              font-size: 24rpx;
              height: 44rpx;
              display: block;
              text-align: center;
            }
          }
        }
      }
    }

    .zhes_1 {
      width: 100%;
      height: auto;
      text-align: center;
      margin-bottom: 28rpx;
      justify-content: center;

      .zhes_1_img {
        width: 40rpx;
        height: auto;
        margin-right: 8rpx;
      }

      .zhes_1_t {
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
        font-weight: bold;
      }
    }

    .zhes_2 {
      width: 100%;
      height: auto;
      padding: 0 20rpx;
      box-sizing: border-box;
      margin-bottom: 8rpx;

      .zhes_2li {
        color: rgba(0, 0, 0, 1);
        font-size: 28rpx;
        font-weight: bold;
        margin-right: 5rpx;

        text {
          font-family: 'AvantGardeFont';
        }
      }
    }

    .zhes_3 {
      height: 32rpx;
      line-height: 32rpx;
      color: rgba(16, 16, 16, 1);
      font-size: 24rpx;
      width: 100%;
      text-align: center;
      margin-bottom: 20rpx;
    }

    .zhes_4 {
      width: 100%;
      height: auto;
      border-radius: 20rpx;
      background-color: rgba(238, 238, 238, 1);
      padding: 20rpx 30rpx;
      color: rgba(249, 65, 65, 1);
      font-size: 24rpx;
      box-sizing: border-box;
      line-height: 40rpx;
      margin-bottom: 48rpx;
    }

    .zhes_5 {
      width: 100%;
      height: 72rpx;
      border-radius: 100rpx;
      background-color: rgba(249, 191, 65, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      text-align: center;
      line-height: 72rpx;
    }

    .tan {
      padding-bottom: 56rpx;
      margin-top: -272rpx;
    }
  }

  .tan_video {
    width: 650rpx;
    height: 1105rpx;
    padding: 0 0;
    margin-left: -325rpx;
        display: flex;
        align-items: center;
    image{
      width: 100%;
      height: auto;
    }
  }

  .tan.tan_video {
    margin-top: -552rpx;
  }

  video {
    width: 650rpx;
    height: 1105rpx;
  }

  .zhen_add {
    width: 100%;
    height: auto;
    border-radius: 10rpx;
    background-color: rgba(255, 246, 228, 1);
    color: rgba(0, 0, 0, 1);
    font-size: 24rpx;
    padding: 10rpx 16rpx;
    box-sizing: border-box;
    margin-top: 12rpx;
  }

  .zhn {
    width: 100%;
    height: auto;

    .zhn_img {
      display: block;
      width: 100%;
      height: auto;
      margin-bottom: 20rpx;
    }

    .zhnc {
      width: 100%;
      height: auto;
      align-items: flex-end;

      .zhnc_z {
        // width: 328rpx;
        // height: 120rpx;
        // border-radius: 10rpx;
        // padding: 14rpx 24rpx;
        align-items: baseline;
        box-sizing: border-box;
        height: 90rpx;
        overflow: hidden;
        // background-color: rgba(255, 246, 228, 1);
        position: relative;
        width: 300rpx;

        .zhnc_z1 {
          color: rgba(16, 16, 16, 1);
          font-size: 28rpx;
          // line-height: 32rpx;
          margin-right: 12rpx;
          bottom: 20rpx;
          right: 160rpx;
          position: absolute;
        }

        .zhnc_z2 {
          right: 0;
          position: absolute;
          line-height: 90rpx;
          color: rgba(16, 16, 16, 1);
          font-size: 60rpx;
          font-family: 'AvantGardeFont';
          width: 160rpx;
          height: 90rpx;
        }
      }

      .zhnc_y {
        .zhnc_y_img {
          width: auto;
          height: 30rpx;
          margin-right: 8rpx;
        }

        .zhnc_yc {
          line-height: 40rpx;
          color: rgba(0, 0, 0, 1);
          font-size: 28rpx;
        }
      }
    }
  }

  .tia {
    width: 100%;
    height: auto;

    .tiaz {
      .tiazz {
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
      }

      .tiazy {
        width: 24rpx;
        height: auto;
        margin-top: -12rpx;
        margin-left: 6rpx;
      }
    }

    .tiay {
      width: 200rpx;
      height: 40rpx;
      line-height: 40rpx;
      border-radius: 40rpx;
      background-color: rgba(0, 0, 0, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      display: inline-block;
      color: rgba(255, 255, 255, 1);
      font-size: 24rpx;
      text-align: center;
      margin-left: 20rpx;
    }

    .tiay.huangse {
      background: #F9BF41;
      color: rgba(16, 16, 16, 1);
    }

    .tiay.huangse2 {
      background-color: rgba(255, 246, 228, 1);
      color: rgba(16, 16, 16, 1);
    }

    .tiay.huise {
      background-color: #cecece;
      color: rgba(16, 16, 16, 1);
    }
  }

  .tiazlist {
    width: 100%;
    height: auto;
    border-radius: 10rpx;
    background-color: rgba(255, 246, 228, 1);
    padding: 20rpx;
    box-sizing: border-box;
    line-height: 32rpx;
    color: rgba(16, 16, 16, 1);
    font-size: 24rpx;
    margin: 30rpx 0;

    .tiazlistli {
      margin-bottom: 10rpx;
      word-break: break-all;
    }
  }

  .tiazlist1 {
    width: 100%;
    height: 80rpx;
    border-radius: 10rpx;
    background-color: rgba(255, 246, 228, 1);
    padding: 0 20rpx;
    box-sizing: border-box;
    line-height: 80rpx;
    color: rgba(16, 16, 16, 1);
    font-size: 24rpx;
    margin: 30rpx 0;
    margin-top: 0;
    margin-bottom: 16rpx;

    .tiazlistli {
      display: block;
      height: 80rpx;
      line-height: 80rpx;
      width: 100%;
      margin-bottom: 10rpx;
    }
  }

  .qiji_l {
    width: 100%;
    height: auto;

    .qiji_l_t {
      line-height: 40rpx;
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      margin-bottom: 28rpx;
    }

    .qiji_l_c {
      width: 100%;
      height: auto;
      margin-bottom: 30rpx;

      .qiji_l_c_ipt {
        width: 526rpx;
        height: 80rpx;
        line-height: 80rpx;
        line-height: 40rpx;
        border-radius: 10rpx 0px 0px 10rpx;
        background-color: rgba(238, 238, 238, 1);
        color: rgba(136, 136, 136, 1);
        font-size: 24rpx;
        padding: 0 20rpx;
        box-sizing: border-box;
      }

      .qiji_l_c_btn {
        width: 120rpx;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 0px 10rpx 10rpx 0px;
        background-color: rgba(249, 191, 65, 1);
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
        text-align: center;
      }

      .qiji_l_c_btn.huise {
        background-color: rgba(206, 206, 206, 1);
        color: rgba(0, 0, 0, 1);
      }


    }

    .qiji_l_b2 {
      width: 100%;
      height: auto;

      .qiji_l_b2_img {
        width: 32rpx;
        height: auto;
        margin-right: 6rpx;
      }

      .qiji_l_b2_c {
        color: rgba(0, 0, 0, 1);
        font-size: 28rpx
      }
    }
  }

  .qiji_l_b_img2 {
    width: 160rpx;
    height: auto;
    display: block;
  }

  .qiji_l_b {
    width: 100%;
    height: 160rpx;
    border-radius: 10rpx;
    // background-color: rgba(247,247,247,1);
    // margin-bottom: 40rpx;

    .qiji_l_b_li {
      width: 160rpx;
      height: 160rpx;
      border-radius: 10rpx;
      text-align: center;
      justify-content: center;
      overflow: hidden;
      background-color: rgba(255, 246, 228, 1);
      margin-right: 16rpx;
      position: relative;
      overflow: hidden;

      .mengban {
        position: absolute;
        width: 160rpx;
        height: 160rpx;
        background-color: rgba(0, 0, 0, 0.5);
        top: 0;
        left: 0;
        color: rgba(255, 255, 255, 1);
        font-size: 24rpx;
        line-height: 160rpx;
        text-align: center;
        font-weight: bold;
      }
    }

    .qiji_l_b_li:last-child {
      margin-right: 0;
    }

    .qiji_l_b_img {
      width: 36rpx;
      height: auto;
      margin-right: 10rpx;
    }

    .qiji_l_b_con {
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
    }

  }

  .tijiaBtn {
    width: 100%;
    height: 84rpx;
    line-height: 84rpx;
    border-radius: 20rpx;
    background-color: rgba(211, 211, 211, 1);
    color: rgba(16, 16, 16, 1);
    font-size: 32rpx;
    text-align: center;
    margin-bottom: 20rpx;
  }

  .tijiaBtn.huanse {
    background-color: rgba(249, 191, 65, 1);
  }
</style>